<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">
	$(function() {
		$('#container').highcharts({
			chart : {},
			title : {
				text : 'Combination chart'
			},
			xAxis : {
				categories : [ 'Apples', 'Oranges', 'Pears', 'Bananas', 'Plums' ]
			},
			tooltip : {
				formatter : function() {
					var s;
					if (this.point.name) { // the pie chart
						s = '' + this.point.name + ': ' + this.y + ' fruits';
					} else {
						s = '' + this.x + ': ' + this.y;
					}
					return s;
				}
			},
			labels : {
				items : [ {
					html : 'Total fruit consumption',
					style : {
						left : '40px',
						top : '8px',
						color : 'black'
					}
				} ]
			},
			series : [ {
				type : 'column',
				name : 'Jane',
				data : [ 3, 2, 1, 3, 4 ]
			}, {
				type : 'column',
				name : 'John',
				data : [ 2, 3, 5, 7, 6 ]
			}, {
				type : 'column',
				name : 'Joe',
				data : [ 4, 3, 3, 9, 0 ]
			}, {
				type : 'spline',
				name : 'Average',
				data : [ 3, 2.67, 3, 6.33, 3.33 ],
				marker : {
					lineWidth : 2,
					lineColor : Highcharts.getOptions().colors[3],
					fillColor : 'white'
				}
			}, {
				type : 'pie',
				name : 'Total consumption',
				data : [ {
					name : 'Jane',
					y : 13,
					color : Highcharts.getOptions().colors[0]
				// Jane's color
				}, {
					name : 'John',
					y : 23,
					color : Highcharts.getOptions().colors[1]
				// John's color
				}, {
					name : 'Joe',
					y : 19,
					color : Highcharts.getOptions().colors[2]
				// Joe's color
				} ],
				center : [ 100, 80 ],
				size : 100,
				showInLegend : false,
				dataLabels : {
					enabled : false
				}
			} ]
		});
	});
</script>
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
